<include file="Public:header_content" />

<div class="col-sm-12">
    <!-- Example Events -->

    <div class="example-wrap">
        <h4 class="example-title"></h4>
        <div class="example">
            <div class="btn-group hidden-xs" id="exampleTableEventsToolbar" role="group" style="float: left;margin-top: 10px;">
                <button class="btn btn-default" style="padding:0px;border:0px solid;">
                    <input name="selectPageNumber" class="form-control" type="text" style="color:green;width:60%;float:left;" />
                    <span id="selectPage" style="width:40%;float:right;line-height:30px;">Select Page</span>
                </button>
                <button type="button" class="btn btn-outline btn-default">
                    <i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
                </button>
                </button>
                <button type="button" id="del" class="btn btn-outline btn-default">
                    <i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
                </button>
                <button class="btn btn-outline btn-default" style="padding:0px;border:0px solid;">
                <select id="search_key" class="form-control">
                    <option value="article_name" selected>章节名称</option>
                    <option value="book_name">书记名称</option>
                </select>
                </button>
            </div>
            <table id="tableList"></table>
        </div>
    </div>
    <!-- End Example Events -->
</div>

<include file="Public:footer_content" />
<script src="/Public/plugin/gb312/js/bootstrap-table-edit.js"></script>
<script src="/Public/plugin/gb312/js/plugins/bootstrap-table/bootstrap-editable.js"></script>

<script type='text/javascript'>
    var tableList = $('#tableList');
    $(function () {
        tableList.bootstrapTable({
            url: "<{:U('Book/articleList')}>",
            refresh: {
                url: '<{:U("Book/articleList")}>',
                silent: false,
                //pageSize:2,
                //query:{foo: 'bar'},
            },
            dataType:'json',
            method: 'post',
            contentType: "application/x-www-form-urlencoded",//post请求必带属性  application/json;charset=UTF-8
            //sortClass: 'cate_id',
            cache: false,
            showRefresh: true,
            showToggle: true,
            toolbar: '#toolbar',//工具按钮用哪个容器
            striped: true,//是否显示行间隔色
            showPaginationSwitch: true,//显示分页按钮开关
            buttonsAlign: 'right',
            toolbarAlign: 'right',
            clickToSelect: true,
            showHeader: true,
            showFooter: false,
            showColumns: true,
            selectItemName:'article_name',
            queryParams: queryParams,//传递参数（*）
            //cardView: true,
            //detailView: true,////是否显示父子表
            sortStable: true,
            sortOrder: 'desc',
            paginationPreText: '上一页',
            paginationNextText: '下一页',
            iconSize: 'outline',
            idField:'cate_id',
            pagination: true, //分页
            dataField: 'lists',//bootstrap table 可以前端分页也可以后端分页，这里我们使用的是后端分页，后端分页时需返回含有total：总记录数,这个键值好像是固定的
                             //rows： 记录集合 键值可以修改  dataField 自己定义成自己想要的就好
            maintainSelected: false,//在更改页和搜索上保持选定的行
            minimumCountColumns: 10,
            pageNumber: 1,//初始化到第几页
            queryParamsType:'limit',//查询参数组织方式
            pageSize: 18,//初始化页面条数
            pageList:[10,20,50],
            singleSelect: false,
            //data-locale:"zh-US", //表格汉化
            search: true, //显示搜索框
            searchAlign: 'left',
            searchOnEnterKey: false,
            searchTimeOut: '15',
            searchText: '',
            trimOnSearch: false,
            sidePagination: "server", //server 服务端处理分页
            uniqueId: 'article_id',//每一行的唯一标识，一般为主键列
            columns: [{
                field: 'checkboxs',
                title: '全选',
                checkbox: true
            },{
                field: 'article_id',
                title: 'ID',
                sortable: true,
                order:'desc',
                visible: false, //影藏该字段
            },{
                field: 'book_id',
                title: '书籍名称',
                formatter: function (value,row,index) {
                    return '<a href="/'+row.book_id+'.html" target="_blank">'+row.book_name+'</a>';
                }
            }, {
                field: 'article_name',
                title: '章节名称',
                formatter:function (value,obj){
                    return '<a target="_blank" href="/'+obj.book_id+'-'+obj.article_id+'.html">'+value+'</a>';
                }
            },{
                field: 'create_time',
                title: '更新时间',
                sortable: true,
                //clickToSelect: false,
                //switchable: false,
                formatter: function (value) {
                    return new Date(parseInt(value) * 1000).toLocaleString().substr(0,20).replace(/\//g, "-");
                    //return year+'-'+month+'-'+date;
                }
            },{
                field: 'content',
                title: '查看内容',
                align: 'center',
                valign: 'middle',
                formatter: function (value, row,index) {
                    return '<a class="J_menuItem" data-index="10000" href="content/article_name/'+row.article_name+'/article_id/'+row.article_id+'" >查看</a> ';
                }
            }],
            onClickRow: function(row,$element,field){
                $('.success').removeClass('success');
                $($element).addClass('success');
            },
            onDblClickCell: function(field, value, row, $element){
                  if(field == 'alias'){
                      //$element.empty();
                      //$element.append("<input type='text' name='alias' value='' />");
                      //return '<input type="text" name="alias" value="" />';
                  }
            }
        });



    });

    function queryParams(params){
        //alert(JSON.stringify(params));
        var search_key = $('#search_key').val();
        var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                limit: params.limit,   //页面大小
                offset: params.offset,  //页码
                search:params.search,
                searchkey:search_key,
                order: params.order//排位命令（desc，asc）
            };
        return temp;
    }

    //选择页数
    $('#selectPage').click(function(){
            var pageNumber = $('input[name="selectPageNumber"]').val();
            if(pageNumber > 0){
                tableList.bootstrapTable('selectPage', pageNumber);
            }
    });

    $('#del').click(function () {
            var ids = $.map(tableList.bootstrapTable('getSelections'), function (row) {
                return row.article_id;
            });
            $.ajax({
                type: "POST",
                url: "<{:U('Book/delArticle')}>",
                data: "ids="+ids,
                success: function(msg){
                  if(msg == 'success'){
                        tableList.bootstrapTable('remove', {
                            field: 'article_id',
                            values: ids
                        });
                        swal("删除成功","","success");
                  }else{

                  }
                }
             });

        });
</script>